<template>
	<el-dialog class="orderData-dialog" :visible.sync="visible" :fullscreen="true" title="订单数据"
		:close-on-click-modal="false" :close-on-press-escape="true">
		<d2-container class="d-flex flex-column">
			<div class="d-flex flex-column" slot="header">
				<div class="d-flex orderTitle a-center j-sb px-10">
					<div class="d-flex flex-row orderTitle-text">
						<div class="d-flex mr-20">订单数据</div>
						<div class="d-flex mr-20" style="color: #67c23a;">{{`${orderDataForm.spread_id?`推广id：${orderDataForm.spread_id}`:''}`}}</div>
						<div class="d-flex" style="color: #67c23a;">{{`${orderRowData.recharge_assistant_template_name?`推广链接名称：${orderRowData.recharge_assistant_template_name}`:''}`}}</div>
					</div>
					<el-button size="small" round icon="" @click="visible = false" type="primary">关闭弹窗</el-button>
				</div>
				<el-form class="d-flex orderForm b-s my-10 flex-wrap" :inline="true" size="small" :model="orderDataForm"
					label-position="right" @keyup.enter.native="getTableList(true)" @submit.native.prevent>
					<el-form-item label="创建时间">
						<el-date-picker v-model="orderDataForm.created_at" type="datetimerange" range-separator="至"
							value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="订单属性">
						<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="orderDataForm.order_id" placeholder="订单号"
							clearable />
					</el-form-item>
					<el-form-item label="">
						<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="orderDataForm.user_id" placeholder="用户id"
							clearable />
					</el-form-item>
					<el-form-item label="">
						<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="orderDataForm.keyword" placeholder="短剧名称"
							clearable />
					</el-form-item>
					<el-form-item label="">
						<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="orderDataForm.spread_name"
							placeholder="推广链名称" clearable />
					</el-form-item>
					<el-form-item prop="goods_type" label="订单类型">
						<el-select clearable v-model="orderDataForm.goods_type" placeholder="请选择">
							<el-option v-for="(item,index) in goodsType" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="status" label="订单状态">
						<el-select clearable v-model="orderDataForm.status" placeholder="请选择">
							<el-option v-for="(item,index) in statusArr" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="pay_type" label="支付场景">
						<el-select clearable v-model="orderDataForm.pay_type" placeholder="请选择">
							<el-option v-for="(item,index) in payType" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary" @click="getTableList(true)">搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="d-flex h-100 b-s flex-column">
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-table ref="xTable" border height="100%" resizable :data="orderDataList" :loading="orderDataLoading"
							:loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}">
							<vxe-column width="260" field="order_id" title="订单号" sortable align="center"></vxe-column>
							<vxe-column width="100" field="id" title="订单id" sortable align="center"></vxe-column>
							<vxe-column width="100" field="user_id" title="用户id" sortable align="center"></vxe-column>
							<vxe-column width="180" field="ad_id" title="计划id" align="center"></vxe-column>
							<vxe-column width="180" field="applet_name" title="小程序名称" align="center"></vxe-column>
							<vxe-column width="180" field="playlet_name" title="短剧名称" align="center"></vxe-column>
							<vxe-column width="120" field="amount" title="支付金额" align="center"></vxe-column>
							<vxe-column width="120" field="status_name" title="订单状态" align="center"></vxe-column>
							<vxe-column width="180" field="pay_type_name" title="支付场景" align="center"></vxe-column>
<!-- 							<vxe-column width="120" field="spread_id" title="推广链接id" sortable
								align="center"></vxe-column>
							<vxe-column width="180" field="spread_name" title="推广链接名称" align="center"></vxe-column> -->
							<vxe-column width="180" field="recharge_goods_name" title="订单类型"
								align="center"></vxe-column>
							<vxe-column width="100" field="goods_id" title="充值模板id" sortable
								align="center"></vxe-column>
							<vxe-column width="180" field="order_time" title="订单时间" sortable
								align="center"></vxe-column>
							<vxe-column width="180" field="pay_time" title="支付时间" sortable align="center"></vxe-column>
							<vxe-column width="180" field="is_backhaul" title="手动上报" align="center">
								<template v-slot="{ row }">
									<el-button v-if="row.is_backhaul=='N'" icon="" size="small" round type="primary"
										@click="postbackhaul(row)">手动上报</el-button>
									<div v-else style="color: #67c23a;font-weight: bold; font-size: 18px;">已上报</div>
								</template>
							</vxe-column>
							<template #empty>
								<div class="d-flex flex-row a-center j-center font-md">
									<div class="d-flex">
										暂时没有订单数据~
									</div>
								</div>
							</template>
						</vxe-table>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :current-page="orderDataForm.page"
					:page-size="orderDataForm.pageSize" :total="total" :page-sizes="[10,20,50,100,150,200]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="orderHandlePageChange">
				</vxe-pager>
			</div>
		</d2-container>
	</el-dialog>
</template>

<script>
	let that;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				dataId: null,
				orderRowData:{},
				orderDataLoading: false,
				total: 0,
				platformId: [],
				backhaulSetting: [],
				visible: false,
				deptList: [],
				deptListVisible: false,
				fullscreenLoading: false,
				roleList: [],
				roleIdListDefault: [],
				orderDataList: [],
				goodsType: [{
					label: '普通充值',
					value: 1,
				}, {
					label: '1天会员',
					value: 2,
				}, {
					label: '3天会员',
					value: 3,
				}, {
					label: '7天会员',
					value: 4,
				}, {
					label: '15天会员',
					value: 5,
				}, {
					label: '月度会员',
					value: 6,
				}, {
					label: '季度会员',
					value: 7,
				}, {
					label: '半年会员',
					value: 8,
				}, {
					label: '年度会员',
					value: 9,
				}, {
					label: '整剧购买',
					value: 10,
				}],
				statusArr: [{
					label: '全部',
					value: 0,
				}, {
					label: '待支付',
					value: 1,
				}, {
					label: '已支付',
					value: 2,
				}, {
					label: '已取消',
					value: 3,
				}, {
					label: '已退款',
					value: 4,
				}],
				payType: [{
					label: '微信虚拟支付',
					value: 1,
				}, {
					label: '微信支付',
					value: 2,
				}],
				orderDataForm: {
					page: 1,
					pageSize: 20,
					spread_id: ''
				}
			}
		},
		created() {
			that = this;
			this.orderDataForm['applet_ids'] = this.info.applet_id;
			this.orderDataForm['delivery_user_id'] = this.info.delivery_user_id;
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			])
		},
		watch: {
			'info.applet_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (typeof newVal == 'number') {
							console.warn('========监听小程序ID发生变化=======');
							console.log(newVal);
							this.orderDataForm['applet_ids'] = newVal;
							this.$forceUpdate();
						}
					}
				},
				deep: true,
				immediate: true
			},
			'info.delivery_user_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (Array.isArray(newVal)) {
							console.warn('========投放组员ID发生变化=======');
							console.log(newVal);
							this.orderDataForm['delivery_user_id'] = newVal;
							this.$forceUpdate();
						}
					}
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			orderHandlePageChange({ type, currentPage, pageSize, $event }){
				this.orderDataForm.page = currentPage;
				this.orderDataForm.pageSize = pageSize;
				this.getTableList();
			},
			async postbackhaul(row) {
				const backhaulRes = await this.$axios.post(`/api/delivery/payment/backhaul/${row.id}`);
				this.getTableList();
				that.$message({
					message: '上报成功！',
					type: 'success',
					duration: 2000
				});
			},
			async getTableList(init=false) {
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				this.orderDataLoading = true;
				console.log(this.orderDataForm);
				this.orderDataForm['spread_id'] = this.orderRowData.id;
				this.orderDataForm['applet_ids'] = this.info.applet_id;
				
				const tableRes = await this.$axios.get('/api/delivery/payment?' + this.$qs.stringify(this.orderDataForm));
				this.orderDataLoading = false;
				if(typeof tableRes == 'object' && tableRes!=null){
					this.total = tableRes.total||0;
					if(Array.isArray(tableRes.data)){
						let tdlen = tableRes.data.length;
						if(tdlen){
							this.orderDataList = tableRes.data;
							return
						}
					}
				}
				this.orderDataList = [];
			},
			//投放平台列表
			async getPlatformFn() {
				const platformIdRes = await this.$axios.get('/api/common/platform');
				console.log(platformIdRes);
				if (Array.isArray(platformIdRes)) {
					if (platformIdRes.length) {
						this.platformId = platformIdRes;
						return;
					}
				}
				this.platformId = [];
			},
			//回传监测模板列表
			async getBackhaulSettingFn() {
				console.log('回传监测模板列表回传监测模板列表');
				const backhaulSettingRes = await this.$axios.get(
					`/api/delivery/dataSpread/deliverySettings/${this.orderDataForm.id}`);
				console.log(backhaulSettingRes);
				if (Array.isArray(backhaulSettingRes)) {
					if (backhaulSettingRes.length) {
						this.backhaulSetting = backhaulSettingRes;
						return;
					}
				}
				this.backhaulSetting = [];
			},
			init(row) {
				this.orderDataForm.page = 1;
				this.orderDataForm.pageSize = 20;
				this.orderDataForm['applet_ids'] = this.info.applet_id;
				this.visible = true;
				this.orderRowData = Object.assign({}, row);
				this.$nextTick(() => {
					this.getTableList();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderTitle{
		height: 56px;
		border-bottom: 1px solid #cfd7e5;
		.orderTitle-text{
			font-size: 18px;
			font-weight: bold;
		}
	}
	.orderForm{
		padding: 0px 20px!important;
	}
	:deep(.d2-container-full) {
		right: 0px !important;
	}
	:deep(.d2-container-full__header) {
		padding: 0px !important;
	}
	.orderData-dialog :deep(.el-dialog__body) {
		height: calc(100vh - 188px);
		overflow: hidden;
		padding: 0px 20px !important;
	}
</style>